<script setup lang="ts">
import { reactive, watch } from "vue";
// 鸿蒙中的 @Watch 功能在 Vue 中都支持，Vue 甚至提供的更多
//  使用 watch 监听一个响应式数据
//  使用 watch 监听多个响应式数据
//  使用 watch 监听响应式对象数据中的一个属性(简单数据类型)
//  使用 watch 监听响应式对象数据中的一个属性(复杂数据类型)，配置深度监听
//  使用 watch 监听，配置默认执行

const user = reactive({
  name: "张三",
  info: {
    gender: "男",
    age: 18,
  },
});

// 侦听对象属性值，改写成箭头函数 返回属性值的写法
// watch(() => user.info.age, () => {
//   console.log('user.info.age 变化了')
// })

// 通过参数3：开启深度侦听 { deep: true }
watch(
  () => user.info,  // 如果返回值是对象，需要开启深度侦听才行
  () => {
    console.log('user.info 对象变化了，深度侦听')
  },
  {
    deep: true,  // 开启深度监听
    immediate: true  // 默认执行一次(了解)
  }
)

</script>

<template>
  <p>{{ user }}</p>
  <button @click="user.name = '李四'">点击改名</button>
  <button @click="user.info.age += 1">点击年龄+1</button>
</template>
